<template>
	<view class="container">
		<scroll-view
			class="scroll-Y" 
			:scroll-y="true"
			:refresher-enabled="true" 
			:scroll-into-view="scrollId"
			:refresher-triggered="refreshing"
			refresher-default-style="none" 
			refresher-background="rgba(255, 255, 255, 0)"
			@refresherrefresh="refresh"
			@scrolltolower="reachBottom"
			@scroll="scroll"
		>
			<view class="head">
				<uni-nav-bar 
					class="ch-nav" 
					height="88rpx" 
					:backgroundColor="navBgColor" 
					leftWidth="90rpx" 
					rightWidth="90rpx" 
					color="#fff" 
					:fixed="true" 
					:padding="false" 
					:border="false" 
					@clickLeft="$goBack(1)"
					@clickRight="$goByName('barset', {bid: barId})"
				>
					<template slot="left">
						<image class="left" src="@/public/images/public/dhl_fhb.png" mode="aspectFit"></image>
					</template>
					<view class="title" v-if="barInfo" v-show="isBlack">
						<lazy-image class="avatar" :src="barInfo.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
						<text>{{barInfo.title}}</text>
					</view>
					<template slot="right" v-if="barInfo">
						<image class="right" src="@/public/images/bar/sz.png" mode="aspectFit"></image>
					</template>
				</uni-nav-bar>
				<template v-if="barInfo">
					<!-- 球吧信息 -->
					<view class="bar-info flex-c">
						<view class="info-top flex-r ac">
							<lazy-image class="bar-img border-round" :src="barInfo.logo+'?imageView2/1/w/100/h/100/q/50'" type="bar" fit="cover"></lazy-image>
							<view class="top-center color-white flex-c">
								<text class="text-large">{{barInfo.title}}</text>
								<view class="flex-r ac">
									<text class="text-info">吧主：{{barInfo.managerName}}</text>
									<image class="icon" src="@/public/images/bar/fs_b.png" mode="aspectFit"></image>
									<text class="text-mini">{{barInfo.num}}</text>
									<image class="icon" src="@/public/images/bar/zxfb_b.png" mode="aspectFit"></image>
									<text class="text-mini">{{barInfo.latestReleaseNum}}</text>
								</view>
							</view>
							<button class="favbtn flex-r ac jc" type="default" @tap="followBar(barInfo.followStatus)">
								<image src="@/public/images/bar/gz_jh.png" mode="aspectFit" v-if="barInfo.followStatus != 1"></image>
								<text>{{ barInfo.followStatus == 1 ? '已关注' : '关注'}}</text>
							</button>
						</view>
						<view class="info-desc text-info color-white text-hidden two" v-if="barInfo.intro">{{barInfo.intro}}</view>
					</view>
					<!-- 活跃用户 -->
					<view class="hot-user flex-r ac" v-if="hotUser[0]">
						<image class="hot-icon" src="@/public/images/bar/hy.png" mode="aspectFit"></image>
						<image class="splite-line" src="@/public/images/bar/fgx.png" mode="heightFix"></image>
						<scroll-view scroll-x="true" class="scroll-X">
							<view class="user-list flex-r ac" @tap="goExpertHome">
								<template v-for="(user, index) in hotUser">
									<lazy-image class="user-avatar border-round" :key="index" :src="user.avatar+'?imageView2/1/w/100/h/100/q/50'" :type="user.userType" fit="cover" :data-userid="user.userId" :data-type="user.userType"></lazy-image>
								</template>
							</view>
						</scroll-view>
					</view>
				</template>
			</view>
			<!-- 内容列表 -->
			<view class="body bottom-ios" id="tabCon" v-if="barInfo">
				<view class="tab-list flex-r ac thinborder" id="tabScroll" :class="{'fixed': fixed}">
					<view class="tab-nav flex-c ac color-grey" v-for="(item, index) in tabList" :key="index" @tap="tabChange(index)" :class="{'active': tabCur == index}">
						<text class="text-primary">{{item.title}}</text>
						<image class="bg-icon" src="@/public/images/bar/hk.png" v-show="tabCur == index"></image>
					</view>
				</view>
				<template v-for="(item, index) in tabList">
					<keep-alive>
						<view class="tab-body" :class="{'fixed': fixed}" v-if="tabCur == index" :key="index" @touchstart="touchStart" @touchend="touchEnd">
							<template v-if="articleList[item.type]">
								<DiscussList v-if="index == 0" :showBar="false" :showTime="true" :list="articleList[item.type]" type="barhome"></DiscussList>
								<ContentList v-else :marginTop="false" :list="articleList[item.type]"  type="barhome" :showSP="false"></ContentList>
							</template>
							<EmptyContent v-else top="160rpx" text="暂无更新的内容" img="qsy_zwxl" @refresh="getArticleList"></EmptyContent>
							<view class="list-end flex-r pb20" v-if="tabData[tabCur].isEnd && articleList[item.type]">
								<view class="list-end-line"></view>
								<text>加载完成，以上为球吧近2周内发布的内容</text>
								<view class="list-end-line"></view>
							</view>
						</view>
					</keep-alive>
				</template>    
			</view>
			<EmptyContent v-else top="250rpx" text="暂无数据" img="qsy_zwxl" @refresh="refresh"></EmptyContent>
		</scroll-view>
		<!-- 动态滚动 -->
		<!-- <ScrollPush v-if="barId && showScrollPush" :barId="barId" type="barhome"></ScrollPush> -->
		<!-- 发布按钮 -->
		<view class="publish-box flex-r ac" v-if="barInfo && barInfo.send">
			<view class="select-box flex-r ac" v-show="publish">
				<view class="select flex-c jc">
					<view class="select-item flex-r ac" @tap="goArticlePublish()">
						<image class="item-icon" src="@/public/images/bar/fa.png" mode="aspectFit"></image>
						<text class="text-regular color-grey">写方案</text>
					</view>
					<view class="select-item flex-r ac" @tap="goDisscussPublish()">
						<image class="item-icon" src="@/public/images/bar/tlt.png" mode="aspectFit"></image>
						<text class="text-regular color-white">讨论帖</text>
					</view>
				</view>
				<image class="right-icon" src="@/public/images/bar/ysj.png" mode="widthFix"></image>
			</view>
			<image class="publish-icon" :src="!publish ? require('@/public/images/bar/fabu.png') : require('@/public/images/bar/qx.png')" mode="aspectFit" @tap="openPublish(barInfo.followStatus)"></image>
		</view>
		<!-- 发布弹窗 -->
		<view class="full-screen flex-r ac jc" v-if="publishArticle">
			<view class="publish-article flex-c ac">
				<image class="close-icon" src="@/public/images/components/gb.png" mode="aspectFit" @tap="publishArticle = false"></image>
				<text class="title">发布方案</text>
				<text class="text-regular color-grey">申请成为平台分析师才能发布付费方案哦～</text>
				<button class="apply flex-r ac jc" type="default" @tap="applyUgcExpert">立即前往申请</button>
				<button class="publish flex-r ac jc" type="default" @tap="$goByName('articlepublish')">发布免费方案</button>
				<view class="no-toast flex-r ac" @tap="switchPublishToast">
					<image class="check-icon" :src="require('@/public/images/public/'+(noPublishToast ? 'ysctsc' : 'xz_wzz')+'.png')" mode="aspectFit"></image>
					<text class="text-small">我已知悉，不再提示</text>
				</view>
			</view>
		</view>
		<!-- 热帖弹窗 -->
		<DiaLoag v-if="barId" :barId="barId" ref="dialog"></DiaLoag>
		
	</view>
</template>

<script>
	import {decrypt } from "@/utils/common/encrypt.js"; 
	export default {
		data() {
			return {
				barId: null, //球吧ID
				barInfo: null, //球吧信息
				hotUser: [], //活跃用户
				articleList: {}, //内容列表

				scrollId: '', //滚动位置
				navBgColor: 'rgba(11,55,217,0)', //导航栏背景色
				isBlack: false, //导航栏文字颜色变黑
				fixed: false, //列表头部导航固定
				refreshing: false, //刷新状态
				
				tabList: [ //tab列表
					{title: '讨论帖', type: 2},
					{title: '免费方案', type: 5},
					{title: '大神解读', type: 4},
					{title: '每日晒单', type: 3}
				],
				tabCur: 0, //当前tab
				tabData: [ //列表数据
					{pageNo: 1, isEnd: false, top: 0},
					{pageNo: 1, isEnd: false, top: 0},
					{pageNo: 1, isEnd: false, top: 0},
					{pageNo: 1, isEnd: false, top: 0}
				],
				
				publish: false, //展开发布菜单
				publishArticle: false, //显示发布料弹窗
				noPublishToast: false, //不提示发布说明
				
				showScrollPush: true, //显示动态滚动
				
				dialogType: null, //弹窗类型
				dialogData: null //弹窗数据
			};
		},
		components: {
			DiscussList: () => import("@/components/ch-article/ch-discusslist.vue"), //讨论贴列表
			ContentList: () => import("@/components/ch-article/ch-contentlist.vue"), //料、晒单内容列表
			ScrollPush: () => import("@/components/ch-scroll/ch-scrollpush.vue"), //动态滚动
			DiaLoag: () => import("./components/ch-dialog/ch-showdialog.vue") //弹窗
			
		},
		computed: {
			user() {
				return this.$store.state.user
			},
			isLogin(){
				return this.$store.state.isLogin
			}
		},
		onLoad() {
			if(!this.user.isRealNameAuth){
				this.getAuthStatus()
			}
			if(this.$Route.query.bid){
				this.barId = this.$Route.query.bid
				this.getBarBaseInfo()
				this.getHotUser()
				this.getArticleList()
			}else{
				console.log('非法请求');
				this.$CHS.errorRequest('index', '数据请求错误，请返回重试')
			}
			this.noPublishToast = uni.getStorageSync('no_publish_toast') || false
			let windowWidth = uni.getWindowInfo().windowWidth
			if(windowWidth){
				this.dpr = windowWidth / 750
			}else{
				this.dpr = 0.5
			}
		},
		onReady() {
			setTimeout(()=>{
				//球吧热帖弹窗
				this.$refs.dialog.showHotDiscuss()
			}, 0)
		},
		onShow() {
			this.showScrollPush = true
		},
		onHide() {
			this.publish = false
			this.publishArticle = false
			this.showScrollPush = false
		},
		methods: {
			//滚动监听
			scroll(e) {
				this.scrollTop = e.detail.scrollTop
				this.publish = false
				if(!this.timeout){
					this.timeout = setTimeout(()=>{
						this.timeout = null
						this.publish = false
						if(this.scrollTop > 46 * this.dpr){
							this.isBlack = true
							this.navBgColor = 'rgba(11,55,217,1)'
						}else{
							this.isBlack = false
							this.navBgColor = 'rgba(11,55,217,0)'
						}
						uni.createSelectorQuery().select('#tabCon').boundingClientRect(res => {
							console.log(res.top);
							if(res && res.top < 10 * this.dpr){
								this.fixed = true
							}else{
								this.fixed = false
							}
						}).exec()
					}, 50)
				}
			},
			//下拉刷新
			refresh() {
				this.refreshing = true
				this.getBarBaseInfo();
				this.getHotUser()
				if(!this.user.isRealNameAuth){
					this.getAuthStatus()
				}
				this.tabData[this.tabCur].pageNo = 1
				this.getArticleList()
				setTimeout(() => {
					this.refreshing = false
				}, 800)
			},
			//滑动触底加载
			reachBottom() {
				if(!this.tabData[this.tabCur].isEnd){
					this.getArticleList()
				}
			},
			//查询球吧基本信息
			getBarBaseInfo() {
				this.$http.get({
					url: '/api/forum/getForumInfo',
					data: {
						id: this.barId
					}
				}).then(data => {
					console.log('barInfo', data);
					if(data.success && data.result){
						this.barInfo = data.result
					}else{
						this.$ShowToast({text: data.message || '球吧信息加载失败', type: 2, time: 3})
						setTimeout(()=>{
							this.$goBack(1)
						}, 1000)
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询活跃用户
			getHotUser() {
				this.$http.get({
					url: '/api/forum/user/active',
					data: {
						forumId: this.barId
					}
				}).then(data => {
					console.log('hotUser', data);
					if(data.success && data.result){
						this.hotUser = data.result
					}
				}).catch((err) => {
					console.log(err);
				})
			},
			//查询认证状态
			getAuthStatus() {
				if(!this.$store.state.isLogin){
					this.$http.get({
						url: '/api/user/auth/check'
					}).then(data => {
						console.log(data);
						if(data.success){
							this.$store.commit('UPDATE_USERINFO', {isRealNameAuth: data.result})
						}
					})
				}
				
			},
			getArticleList() {
				let type = this.tabList[this.tabCur].type
				this.$http.get({
					url: '/api/forum/article/release',
					data: {
						forumId: this.barId,
						type,
						pageNo: this.tabData[this.tabCur].pageNo,
						pageSize: 10
					}
				}).then(data => {
					//处理解密数据
					const arr=[];
					if(data.success && data.result && data.result.total){
						data.result.records.forEach((item)=>{
							if(item.videoUrl){
								item.videoUrl=decrypt(item.videoUrl).split('mp4')[0]+'mp4'
							}
						})
						console.log(data.result.records,'data.result.records')
						if(this.tabData[this.tabCur].pageNo == 1){
							this.$set(this.articleList, type, data.result.records)
						}else{
							this.articleList[type].push(...data.result.records)
						}
						this.tabData[this.tabCur].isEnd = data.result.current >= data.result.pages
						this.tabData[this.tabCur].pageNo = data.result.current + 1
					}
					
				}).catch((err) => {
					console.log(err);
				})
			},
			//关注球吧
			followBar(followStatus) {
				console.log(followStatus,this.user,this.isLogin)
				if(!this.isLogin){
					this.$CHS.goUserLogin()
				}
					if(!this.isFaving){
						this.isFaving = true
						let status = followStatus == 1 ? 2 : 1
						this.$http.post({
							url: '/api/forum/user/follow',
							data: {
								id: this.barId,
								status
							}
						}).then((data)=>{
							if(data.success){
								let statusText = status == 1 ? '已关注' : '已取消关注'
								this.$ShowToast({text: data.message || statusText, type: 1})
								this.$set(this.barInfo, 'followStatus', status)
								this.getBarBaseInfo();
							}else{
								uni.showToast({
									title: data.message || '操作失败，请稍后重试',
									icon: 'none'
								})
							}
						}).catch((err) => {
							console.log(err);
						}).finally(()=>{
							this.isFaving = false
						})
					}
				
				
			},
			//打开发布菜单
			openPublish(follow) {
				if(follow == 1){
					this.publish = !this.publish
				}else{
					uni.showToast({
						title: '请先关注球吧',
						icon: 'none'
					})
				}
			},
			//发布讨论帖
			goDisscussPublish() {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(this.user.isRealNameAuth){
					this.$CHS.checkUserLimit(3).then((result) => {
						if(result){
							this.$goByName('discusspublish', {bid: this.barId});
						}else{
							uni.showToast({
								title: '您的声望等级不足，暂无权限发布讨论帖',
								icon: 'none'
							})
						}
					}).catch((error) => {
						console.log(error);
					})
				}else{
					this.$goByName('userauth')
				}
			},
			//发布免费方案
			goArticlePublish() {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				if(this.user.isRealNameAuth){
					this.$CHS.checkUserLimit(4).then((result) => {
						if(result){
							if(this.noPublishToast === true){
								this.$goByName('articlepublish', {bid: this.barId});
							}else{
								this.publishArticle = true
							}
						}else{
							uni.showToast({
								title: '您的声望等级不足，暂无权限发布免费方案',
								icon: 'none'
							})
						}
					}).catch((error) => {
						console.log(error);
					})
				}else{
					this.$goByName('userauth')
				}
			},
			//发布方案提示弹窗
			switchPublishToast() {
				this.noPublishToast = !this.noPublishToast
				uni.setStorageSync('no_publish_toast', this.noPublishToast)
			},
			//申请成为专家
			applyUgcExpert() {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				this.$CHS.checkUserLimit(5).then((result) => {
					if(result){
						this.$goByName('applyexpert')
					}else{
						uni.showToast({
							title: '您的声望等级不足，暂无权限申请成为专家',
							icon: 'none'
						})
					}
				}).catch((error) => {
					console.log(error);
				})
			},
			//打开专家主页
			goExpertHome(event) {
				if(!this.$store.state.isLogin){
					this.$CHS.goUserLogin()
					return
				}
				let {userid, type} = event.target.dataset
				this.$CHS.goExpertHome(userid, type)
			},
			//刷新列表
			refreshList(index) {
				this.tabCur = index
				this.tabData[this.tabCur].pageNo = 1
				this.getArticleList()
			},
			//选项卡切换
			tabChange(index) {
				this.tabCur = index;
				let type = this.tabList[this.tabCur].type
				if(!this.articleList[type] || !this.articleList[type][0]){
					this.getArticleList()
				}
				this.$nextTick(()=>{
					this.scrollTop = this.tabData[this.tabCur].top
				})
				setTimeout(()=>{
					this.scrollId = 'tabCon'
					this.$nextTick(()=>{
						this.scrollId = ''
					})
				}, 50)
			},
			//触摸滑动开始
			touchStart(e) {
				if (e.changedTouches.length == 1) {
					this.startX = e.changedTouches[0].clientX
					this.startY = e.changedTouches[0].clientY
				}
			},
			//触摸滑动结束
			touchEnd(e) {
				if (e.changedTouches.length == 1) {
					var endX = e.changedTouches[0].clientX;
					var endY = e.changedTouches[0].clientY;
					var xTowards = endX - this.startX;
					var yTowards = endY - this.startY;
					if (xTowards > 50 && Math.abs(yTowards) < 50) {//向右
						console.log('向右')
						if(this.tabCur > 0){
							this.tabChange(this.tabCur - 1)
						}
					}
					if (xTowards < -50 && Math.abs(yTowards) < 50) {//向左
						console.log('向左')
						let maxlen = this.tabList.length - 1;
						if(this.tabCur < maxlen){
							this.tabChange(this.tabCur + 1)
						}
					}
				}
			},
			//设置导航区域背景色
			setNavBgColor() {
				let scrollTop = this.scrollTop
				switch (true){
					case scrollTop < 10:
						this.navBgColor = 'rgba(11,55,217,0)'
						this.isBlack = false
						break;
					case scrollTop < 20:
						this.navBgColor = 'rgba(11,55,217,0.1)'
						this.isBlack = false
						break;
					case scrollTop < 40:
						this.navBgColor = 'rgba(11,55,217,0.2)'
						this.isBlack = true
						break;
					case scrollTop < 80:
						this.navBgColor = 'rgba(11,55,217,0.4)'
						this.isBlack = true
						break;
					case scrollTop < 120:
						this.navBgColor = 'rgba(11,55,217,0.6)'
						this.isBlack = true
						break;
					case scrollTop < 150:
						this.navBgColor = 'rgba(11,55,217,0.7)'
						this.isBlack = true
						break;
					case scrollTop < 200:
						this.navBgColor = 'rgba(11,55,217,0.8)'
						this.isBlack = true
						break;
					case scrollTop > 300:
						this.navBgColor = 'rgba(11,55,217,1)'
						this.isBlack = true
						break;
				}
			}
		}
	}
</script>

<style lang="scss">
	.container{
		position: relative;
		.scroll-Y{
			height: calc(100vh - var(--vh-offset, 0px));
		}
		.full-screen{
			z-index: 997;
			.publish-article{
				width: 520rpx;
				border-radius: 20rpx;
				background-color: #FFFFFF;
				background-image: url('~@/public/images/bar/fbfa.png');
				background-size: 100% 180rpx;
				background-position: top left;
				background-repeat: no-repeat;
				position: relative;
				.close-icon{
					position: absolute;
					top: 0;
					right: 0;
					width: 64rpx;
					height: 64rpx;
				}
				.title{
					margin-top: 220rpx;
					font-size: 36rpx;
					font-weight: 500;
				}
				.text-regular{
					margin: 10rpx 0 20rpx;
					max-width: 430rpx;
					text-align: center;
					line-height: 50rpx;
				}
				button{
					width: 440rpx;
					height: 88rpx;
					border-radius: 44rpx;
					box-sizing: border-box;
					font-size: 30rpx;
					margin: 0;
					padding: 0;
				}
				.apply{
					background: #0055FF;
					color: #fff;
				}
				.publish{
					margin: 20rpx 0 30rpx;
					background: #FFFFFF;
					border: 1rpx solid #999999;
				}
				.no-toast{
					margin-bottom: 40rpx;
					.check-icon{
						margin-right: 20rpx;
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
	.head{
		background-image: url('~@/public/images/bar/qbzy_bg2.png');
		background-position: 0 -40rpx;
		background-size: 100%;
		background-repeat: no-repeat;
		.ch-nav{
			.avatar{
				margin-right: 20rpx;
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
			}
		}
		.bar-info{
			padding: 0 20rpx 30rpx;
			.info-top{
				.bar-img{
					width: 104rpx;
					height: 104rpx;
					border: 4rpx solid #fff;
					box-sizing: border-box;
				}
				.top-center{
					flex: 2;
					margin-left: 20rpx;
					.text-large{
						font-weight: 500;
						margin-bottom: 17rpx;
					}
					.icon{
						margin: 0 10rpx 0 20rpx;
						width: 24rpx;
						height: 24rpx;
					}
				}
				.favbtn{
					width: 140rpx;
					height: 60rpx;
					background: #FFFFFF;
					border-radius: 30rpx;
					font-size: 26rpx;
					color: #0055FF;
					padding: 0;
					margin: 0;
					line-height: 60rpx;
					image{
						margin-right: 8rpx;
						width: 25rpx;
						height: 25rpx;
					}
				}
			}
			.info-desc{
				margin-top: 15rpx;
				line-height: 32rpx;
			}
		}
		.hot-user{
			width: 100%;
			height: 96rpx;
			background: #FFFFFF;
			.hot-icon{
				margin-left: 20rpx;
				width: 97rpx;
				height: 32rpx;
			}
			.splite-line{
				margin: 0 20rpx;
				height: 40rpx;
			}
			.scroll-X{
				flex: 2;
				width: 593rpx;
				white-space: nowrap;
				.user-list{
					width: fit-content;
					.user-avatar{
						margin-right: 16rpx;
						width: 64rpx;
						height: 64rpx;
					}
				}
			}
		}
	}
	.body{
		margin-top: 20rpx;
		.tab-list{
			width: 100%;
			height: 88rpx;
			background: #FFFFFF;
			//border-bottom: 1rpx solid #EDEDED;
			.tab-nav{
				flex: 2;
				padding: 0rpx 20rpx;
				position: relative;
				text{
					font-weight: 500;
					white-space: nowrap;
				}
				&.active{
					color: #333333;
				}
				.bg-icon{
					position: absolute;
					top: 10rpx;
					width: 80rpx;
					height: 40rpx;
				}
			}
			&.fixed{
				position: fixed;
				top: 88rpx;
				z-index: 100;
				max-width: $max-width;
				margin: $pc-margin;
			}
		}
		.tab-body{
			&.fixed{
				padding-top: 176rpx;
			}
		}
	}
	.publish-box{
		position: absolute;
		right: 20rpx;
		bottom: 182rpx;
		height: 212rpx;
		z-index: 5;
		@media screen and (min-width: #{$max-width}){
			//right: calc( (100vw - #{$max-width}) / 2 + 20rpx);
		}
		.publish-icon{
			width: 96rpx;
			height: 96rpx;
		}
		.select-box{
			.select{
				width: 240rpx;
				height: 212rpx;
				background: #000000;
				opacity: 0.8;
				border-radius: 10rpx;
				.select-item{
					height: 96rpx;
					margin-left: 30rpx;
					.item-icon{
						margin-right: 20rpx;
						width: 40rpx;
						height: 40rpx;
					}
					.color-grey{
						color: #B3B3B3;
					}
				}
			}
			.right-icon{
				width: 20rpx;
				height: 22rpx;
			}
		}
	}
</style>
